<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>首页</title>
		<jsp:include page="/common/common_head.jsp"></jsp:include>
		<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
		<script type="text/javascript" src="/static/js/splitter.js"></script>
		<script type="text/javascript" src="/static/js/ckeditor/ckeditor.js"></script>
		<style type="text/css">
html,body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #aca;
}

#head {
	height: 100px;
	background-color: #aca;
}

#left {
	background-color: #eee;
}

#content {
	position: relative;
	letter-spacing: 0;
	font-size: 1.2em;
	background: #eee;
	color: #333;
}

#MySplitter {
	height: 700px;
	margin: 10px;
	padding: 0;
	background-color: #aca;
	/* No padding allowed */
}

#MySplitter .vsplitbar {
	width: 6px;
	background: #aca url(/static/img/vgrabber.gif) no-repeat center;
}

#MySplitter .vsplitbar.active {
	background: #da8 url(/static/img/vgrabber.gif) no-repeat center;
	opacity: 0.7;
}

#tabs li .ui-icon-close {
	float: left;
	margin: 0.4em 0.2em 0 0;
	cursor: pointer;
}
</style>

		<script type="text/javascript">
		var tabMap = {
		  _data : [],
		  put : function(obj){this._data.push(obj);},
		  remove : function(obj){for(var i=0;i<this._data.length;i++){var item=this._data[i]; if(item){if(item.url==obj.url || item.index==obj.index){this._data[i]=null;}} }},
		  has : function(obj){for(var i=0;i<this._data.length;i++){var item=this._data[i]; if(item){if(item.url==obj.url || item.index==obj.index){return item;}} } return false;}
		};
		
		var $tabs;
function addTab(url,title) {
        if($tabs){
            var item = tabMap.has({'url':url,'index':-1});
            if(item){
                $tabs.tabs('select', item.index);
            }
            else{
                $tabs.tabs('add', url, title);
                tabMap.put({'url':url,'index': $tabs.tabs('length')-1});
            }
            
            //var index = $('li',$tabs).index($(this).parent());
            //.tabs( 'select' , index );
        }
    }
$(function() {
    //alert($("body").height());
    $("#MySplitter").height($("body").height()-$("#head").height()-20);

    $("#MySplitter").splitter({
        type: "v",
        outline: true,
        minLeft: 100, sizeLeft: 150, minRight: 100,
        resizeToWidth: true,
        cookie: "vsplitter",
        accessKey: 'I'
    });
    
    $("#accordion").accordion({ active: -1});
    
    $tabs = $('#tabs').tabs({
            tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
            add: function(event, ui) {
                var url = $.data(ui.tab, 'load.tabs');
                //alert($.data('load.tabs'));
                //$(ui.panel).load(url);
                $tabs.tabs('select', '#' + ui.panel.id);

            },
            cache: true 
            
        });
        
    $('#tabs span.ui-icon-close').live('click', function() {
            var index = $('li',$tabs).index($(this).parent());
            $tabs.tabs('remove', index);
            tabMap.remove({'url':'','index':index});
        });
    
    //$('#head').load('/content/about_me.jsp');
    
});

</script>

	</head>
	<body>
		<div id="head">
			head
		</div>
		<div id="MySplitter">
			<div id="left" class="ui-corner-all">
				<div id="accordion">
					<h3>
						<a href="#">Section 1</a>
					</h3>
					<div style="overflow: hidden;">
						<ul>
							<li>
								<a
									href="javascript:addTab('/backend/about_me.action','admin about me');">
									About Me</a>
							</li>
							<li>
								<a href="javascript:addTab('/content/about_me.jsp','about me');">aboutMe</a>
							</li>
						</ul>
					</div>
					<h3>
						<a href="#">Section 2</a>
					</h3>
					<div>
					</div>
					<h3>
						<a href="#">Section 3</a>
					</h3>
					<div>
					</div>
				</div>
			</div>
			<div id="content" class="ui-corner-all">
				<div id="tabs">
					<ul>
						<li>
							<a href="#tabs-1">Nunc tincidunt</a>
							<span class="ui-icon ui-icon-close">Remove Tab</span>
						</li>
					</ul>
					<div id="tabs-1">
						<p>
							Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,
							risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
							Nam elementum quam ullamcorper ante. Etiam aliquet massa et
							lorem. Mauris dapibus lacus auctor risus. Aenean tempor
							ullamcorper leo. Vivamus sed magna quis ligula eleifend
							adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum.
							Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede
							varius sollicitudin. Sed ut dolor nec orci tincidunt interdum.
							Phasellus ipsum. Nunc tristique tempus lectus.
						</p>
					</div>
				</div>

			</div>
		</div>
	</body>
</html>